<template>
  <div class="helpcont">
    <el-row class="helptitle">帮助</el-row>

    <div class="helpmain">
      <div class="h_main">
        <div v-for="(item,index) in helpdata" :key="index">
          <el-row class="helponeline">{{ item.title }}</el-row>
          <el-row class="hcontent">{{ item.content }}</el-row>

          <el-row>
            <el-col :span="12">
              <div class="oneimg">
                <img class="helpimg" :src="item.imgurl" @click="handlePictureCardPreview(item.imgurl)">
                <p class="palign">{{ item.sort }}</p>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="oneimg">
                <img class="helpimg" :src="item.imgurl1" @click="handlePictureCardPreview(item.imgurl1)">
                <p class="palign">{{ item.sort1 }}</p>
              </div>
            </el-col>
          </el-row>

        </div>
        <el-row class="helponeline">{{ title }}</el-row>

        <div class="helponeline">
          <a class="a_helponeline" :href="settings.webRoot+'json.txt'" download>下载JSON文件</a>
        </div>

        <!-- -->
        <div v-for="(item,index) in parms" :key="item+index">
          <el-row class="hcontent tablelist">{{ item.note }}</el-row>
          <el-table
            :data="item.arr"
            stripe
            style="width: 100%"
            border
          >
            <el-table-column
              prop="parname"
              label="参数名称"
              width="auto"
            />
            <el-table-column
              prop="value"
              label="参数值"
              width="auto"
            />
            <el-table-column
              prop="parvalue"
              label="参数描述"
              width="auto"
            />
          </el-table>
        </div>

        <div class="helponeline">
          <a class="a_helponeline" :href="settings.webRoot+'json.txt'" download>下载JSON文件</a>
        </div>

        <el-row class="helponeline">{{ titles }}</el-row>
        <el-row class="hcontent">{{ onecont }}</el-row>
        <el-row>
          <el-col :span="12">
            <div class="oneimg">
              <img class="helpimg" :src="img_box1" @click="handlePictureCardPreview(img_box1)">
              <p class="palign">{{ sort }}</p>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="oneimg">
              <img class="helpimg" :src="img_box2" @click="handlePictureCardPreview(img_box2)">
              <p class="palign">{{ sort1 }}</p>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>
<script>
import axios from 'axios'
export default {
    name:'Help',
    data(){
        return{
          // aaa:this.settings,
            img_box1:require('../../assets/uimg/eleven.png'),
            img_box2:require('../../assets/uimg/twelve.png'),
            dialogVisible:false,
            dialogImageUrl:'',
            curHeight:0,
            onecont:'在二维地图上查看飞机飞行情况',
            titles:'5、查看飞行情况',
            sort:'5-1',
            sort1:'5-2',
            helpdata:[
               {
                   id:0,
                   title:"1、注册",
                   content:'注册单位账号:',
                   content1:'',
                   imgurl:require('../../assets/uimg/zhuce.png'),
                   imgurl1:require('../../assets/uimg/zsuccss.png'),
                   sort:'1-1',
                   sort1:'1-2'
               },{
                   id:1,
                   title:"2、添加飞机类型",
                   content:'添加或管理本单位飞机:',
                    content1:'',
                     imgurl:require('../../assets/uimg/tianjia.png'),
                   imgurl1:require('../../assets/uimg/xianshi.png'),
                    sort:'2-1',
                   sort1:'2-2'
               },{
                   id:2,
                   title:"3、添加飞机",
                   content:'选择以后的飞机类型,输入飞机编号,飞机名称,点击提交,系统返回系统内飞机设备识别码(每个飞机对应一个唯一标识,上传飞参是需要用到此编码)',
                    content1:'',
                     imgurl:require('../../assets/uimg/addplan.png'),
                   imgurl1:require('../../assets/uimg/maer.png'),
                    sort:'3-1',
                   sort1:'3-2'
               }
           ],
           title:'4、上传飞行参数',
           content:'',
           parms:[],
        }



  },
  mounted() {
    this.curHeight = document.body.offsetHeight
    this.requestjson()
  },
  methods: {
    handlePictureCardPreview(e) { // 查看大图
      this.dialogImageUrl = e
      this.dialogVisible = true
    },
    requestjson(){
       axios.get("jsonlist.json").then(data =>{
      let str = data.data.replace(/[ ]|[\r\n\s]/g,"");
      let jdat=JSON.parse(str)
      //  console.log(jdat.data.parms)
        this.parms=jdat.data.parms
    })
    }
  }
}
</script>
<style lang="scss">

.helpcont{
    // background-color: #EFF1F5;

   .helptitle{
        color: #347dc7;
        padding: 20px 0 15px 0;
        text-align: center;
        font-size: 22px;
        font-weight: 500;

   }
   .helpmain{
     margin-left: auto;
     margin-right: auto;
     background-color: #fff;
     width: 80%;
     margin-bottom: 50px;

   }
   .helponeline{
       padding-top: 25px;
       font-size: 24px;
       font-weight: 600;
       text-align: left;
   }
   .h_main{
      width: 80%;
      margin: 0 auto;
      padding-bottom: 30px;
   }
   .hcontent{
       font-size: 16px;
       font-weight: 400;
       padding:12px 0 0 0;
   }
   .helpimg{
    max-height:275px;
    min-height: 275px;
    // width: 100%;
   // height: auto;

   }
   .helpimg:hover{
        cursor:pointer
   }
   .oneimg{
     padding:10px;overflow:hidden
   }
   .palign{
       text-align: center;
       font-size: 16px;
       padding-top: 12px;
   }
   .tablelist{
       padding: 15px 0px ;
    //    font-weight: 600;
   }
    // .el-dialog {
    //     -webkit-transform: none;
    //     transform: none;
    //     left: 0;
    //     position: relative;
    //     margin: 0 auto;
    //     width: 33%;
    // }
    .a_helponeline{
        color: #347dc7;
    }

}
</style>
